<template>
  <div id="lyk_input">
    <input type="text" placeholder="待办事项" :value="info" @change="handleInputChange" />
    <button @click="lyk_sub">提交</button>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  methods: {
    //映射方法
    ...mapMutations(["lyk_sub"]),
    // 监听title属性值的变化
    handleInputChange(e) {
      console.log(e.target.value);
      this.$store.commit("setChangeValue", e.target.value);
    }
  },
  //计算属性
  computed: {
    ...mapState(["info"])
  }
};
</script>
<style lang="scss" scoped>
#lyk_input {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  input {
    width: 60%;
  }
  button {
    width: 20%;
  }
}
</style>